<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="../lib/layui-v2.5.5/css/layui.css"  media="all">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
    <div class="layuimini-container">
        <div class="layuimini-main">
            <!--搜索开始-->
            <fieldset class="layui-elem-field layuimini-search">
                <legend>搜索信息</legend>
                <div style="margin: 10px 10px 10px 10px">
                    <form class="layui-form layui-form-pane" action="" id="searchFrm">
                        <div class="layui-form-item">
                            <label class="layui-form-label">用户名</label>
                            <div class="layui-input-inline">
                                <div class="layui-input-inline">
                                    <input type="text" name="username" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <label class="layui-form-label">所属部门</label>
                            <div class="layui-input-inline">
                                <!-- 隐藏部门ID  修改操作 -->
                                <select name="deptID" id="deptID">
                                    <option value="1" selected>人事部</option>
                                    <option value="2">业务部</option>
                                    <option value="3">市场部</option>
                                    <option value="4">IT部</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item">
                                <label class="layui-form-label">真实姓名</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="name" autocomplete="off" class="layui-input">
                                </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">身份证号</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="remark" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <a class="layui-btn " lay-submit="" lay-filter="data-search-btn"><label
                                    class="layui-icon layui-icon-search"></label>搜索</a>
                                    <a class="layui-btn layui-btn-warm" id="resetTabsearchFrm" lay-filter="data-search-btn">
                                        <label class="layui-icon layui-icon-refresh"></label>重置</a>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </fieldset>
                    <!--搜索结束-->
                    <table class="layui-hide" id="employees" lay-filter="employees"></table>
                    <script type="text/html" id="barDemo">
                       <a class="layui-btn layui-btn-primary layui-btn-xs " lay-event="add" id="user_btn_add">添加</a>
                       <a class="layui-btn layui-btn-normal layui-btn-xs " lay-event="detail" id="user_btn_select">查看</a>
                       <a class="layui-btn layui-btn-xs" lay-event="edit" id="user_btn_update">编辑</a>
                       <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" id="user_btn_delete">删除</a>
                   </script>

                   <div id="addEmployeesDiv" style="display: none;padding: 0.3125rem">
                    <form method="post" class="layui-form layui-form-pane" lay-filter="employeesForm" id="employeesForm">
                        <div class="layui-form-item">
                            <input type="hidden" name="usId" id="usId"/>
                            <div class="layui-inline">
                                <label class="layui-form-label">用户名</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="usCode" id="usCode" lay-verify="required" autocomplete="off"
                                    placeholder="请输入用户名" class="layui-input">
                                </div>
                            </div>

                            <div class="layui-inline">
                                <label class="layui-form-label">密码</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="usPassword" id="usPassword" lay-verify="required" autocomplete="off"
                                    placeholder="请输入密码" class="layui-input">
                                </div>
                            </div>

                            <div class="layui-inline">
                                <label class="layui-form-label">所属部门</label>
                                <div class="layui-input-inline">
                                    <select name="usDeptId" id="usDeptId">
                                        <option selected disabled>请选择部门</option>
                                        <option value="人事部">人事部</option>
                                        <option value="业务部">业务部</option>
                                        <option value="市场部">市场部</option>
                                        <option value="IT部">IT部</option>
                                    </select>
                                </div>
                            </div>

                            <div class="layui-inline">
                                <label class="layui-form-label">真实姓名</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="usName" id="usName" lay-verify="required" autocomplete="off"
                                    placeholder="请输入真实姓名" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">英文名称</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="usEngName" id="usEngName" 
                                    autocomplete="off" placeholder="请输入英文名称" class="layui-input">
                                </div>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">身份证号</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="usIdcardNo" id="usIdcardNo" lay-verify="required"
                                    autocomplete="off" placeholder="请输入身份证号" class="layui-input">
                                </div>
                            </div>

                            <div class="layui-inline">
                                <label class="layui-form-label">电话号码</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="usMobilePhone" id="usMobilePhone" lay-verify="required"
                                    autocomplete="off" placeholder="请输入电话号码" class="layui-input">
                                </div>
                            </div>

                            <div class="layui-inline">
                                <label class="layui-form-label">邮箱地址</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="usEmail" id="usEmail" 
                                    autocomplete="off" placeholder="请输入邮箱地址" class="layui-input">
                                </div>
                            </div>

                            <div class="layui-inline">
                                <label class="layui-form-label">薪水</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="usSalary" id="usSalary" lay-verify="required"
                                    autocomplete="off" placeholder="请输入薪水" class="layui-input">
                                </div>
                            </div>
                        </div>


                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">性别</label>
                                <div class="layui-input-inline">
                                    <select name="usGender" id="usGender">
                                        <option value="男" selected>男</option>
                                        <option value="女">女</option>
                                    </select>
                                </div>
                            </div>

                            <div class="layui-inline">
                                <label class="layui-form-label">学历</label>
                                <div class="layui-input-inline">
                                 <select name="usEducation" id="usEducation">
                                    <option disabled="" selected="">请选择学历</option>
                                    <option value="专科">专科</option>
                                    <option value="本科">本科</option>
                                    <option value="研究生">研究生</option>
                                    <option value="博士">博士</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <div class="layui-input-block" style="text-align: center;">
                            <a class="layui-btn " lay-submit="" lay-filter="doAddOrUpdateEmployee"><label
                                class="layui-icon layui-icon-release"></label>提交</a>
                                <a class="layui-btn layui-btn-warm" onclick="javascript:$('#employeesForm')[0].reset()"
                                lay-filter="data-search-btn"><label class="layui-icon layui-icon-refresh"></label>重置</a>
                            </div>
                        </div>
                    </form>
                </div>
                
                <script src="../lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
                <script src="../lib/common/jquery.cookie.min.js"></script>
                <script src="../lib/layui-v2.5.5/layui.js"></script>
                <script src="../lib/common/common.js"></script>
                <script>
                    layui.use(['table','form'], function(){
                      var table = layui.table;
                      var form = layui.form;
            // 定义数据表格
            //layer.msg(api)
            var tableIns = table.render({
                elem: '#employees',
                url: api + 'employees/employee',
                //toolbar: 'default', //  默认的头工具栏事件
                cellMinWidth: 110, //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                limit: 10,
                cols: [
                [{
                    field: 'usCode',
                    title: '用户名',
                    align: "center",
                },
                {
                    field: 'usPassword',
                    title: '用户密码',
                    align: "center",
                },
                {
                    field: 'usDeptId',
                    title: '所在部门',
                    align: "center",
                    /*templet:function(d){
                        switch(d.usDeptId){
                            case 1:
                        "<div>人事部</div>"
                        break;
                        case 2:
                        "<div>IT部</div>"
                        break;
                        }
                    }*/
                },
                {
                    field: 'usName',
                    title: '用户真实姓名',
                    align: "center",
                },
                {
                    field: 'usEngName',
                    title: '用户英文名',
                    align: "center",
                },
                {
                    field: 'usIdcardNo',
                    title: '身份证号',
                    align: "center",
                },
                {
                    field: 'usMobilePhone',
                    title: '手机号',
                    align: "center",
                },
                {
                    field: 'usEmail',
                    title: '邮箱',
                    align: "center",
                },
                {
                    field: 'usSalary',
                    title: '薪水',
                    align: "center",
                    templet: '#availableTpl',
                },
                {
                    field: 'usGender',
                    title: '性别',
                    align: "center",
                },
                {
                    field: 'usEducation',
                    title: '学历',
                    align: "center",
                },
                {
                    field: 'usCreatedTime',
                    title: '入职时间',
                    /*templet: "<div>{{d.usCreatedTime == null ? '' : layui.util.toDateString(d.usCreatedTime, 'yyyy-MM-dd')}}</div>",*/
                    align: "center",
                },
                {
                    fixed: 'right', 
                    title: '操作', 
                    width: 220, 
                    align: 'center', 
                    toolbar: '#barDemo'}
                    ]
                    ],
                    page: true
                });


           /* // 监听搜索操作
            form.on('submit(data-search-btn)', function (data) {
                var params = $("#searchFrm").serialize();
                //执行搜索重载
                table.reload('userTable', {
                    page: {
                        curr: 1
                    },
                    url: api + 'user/loadAllUser?' + params
                });
                return false;
            });*/


            // 定义全局变量
            var mainIndex;
            var url;


             // 打开添加员工得弹出层
             function openAddEmployee() {
                mainIndex = layer.open({
                    type: 1,
                    title: '员工添加',
                    content: $("#addEmployeesDiv"),
                    area: ['60%', '70%'],
                    success: function (index) {
                        url = api + "/addEmployee";
                        $("#employeesForm")[0].reset();
                    }
                });
            }

            // 打开修改员工的弹出层
            function openUpdateEmployee(data) {
                mainIndex = layer.open({
                    type: 1,
                    title: '员工信息修改',
                    content: $("#addEmployeesDiv"),
                    area: ['60%', '70%'],
                    success: function (index) {
                        //layer.alert(JSON.stringify(data));
                        //layer.alert(JSON.stringify(data.usId));
                        url = api + "/updateEmployee";
                        form.val("employeesForm", {
                            "usId": data.usId,
                            "usCode": data.usCode,
                            "usPassword": data.usPassword,
                            "usDeptId": data.usDeptId,
                            "usName": data.usName,
                            "usEngName": data.usEngName,
                            "usIdcardNo": data.usIdcardNo,
                            "usMobilePhone": data.usMobilePhone,
                            "usEmail": data.usEmail,
                            "usSalary": data.usSalary,
                            "usGender": data.usGender,
                            "usEducation": data.usEducation
                        })
                    }
                });
            }

            // 监听添加修改任务的提交
            form.on("submit(doAddOrUpdateEmployee)", function (data) {
                let params = $("#employeesForm").serialize();
                // 提交数据
                $.post(url, params, function (res) {
                    if (res.code == 0) {
                        layer.msg(res.msg)
                        tableIns.reload();
                    } else {
                        layer.msg(res.msg)
                    }
                    layer.close(mainIndex);
                });
                return false;
            });

        //监听行工具事件
        table.on('tool(employees)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                , layEvent = obj.event; //获得 lay-event 对应的值
                if (layEvent === 'add') {
                    layer.msg("添加操作")
                    openAddEmployee();
                } else if (layEvent === 'detail') {
                    layer.msg('查看操作');
                } else if (layEvent === 'del') {
                    layer.confirm('真的删除【' + data.tk_ID + '】这个任务吗？', function (index) {
                        $.post("${pageContext.request.contextPath}/TaskPool/deleteTask", {
                            TK_ID: data.tk_ID
                        }, function (res) {
                            layer.msg(res.msg);
                            obj.del();
                            layer.close(index);
                        })
                    });
                } else if (layEvent === 'edit') {
                    layer.msg('编辑操作');
                    openUpdateEmployee(data)
                } else if (layEvent === 'change_TK_STATUS') {
                    layer.msg("任务状态变更");
                    layer.confirm('确定【' + data.tk_CODE + '】任务已完成？', function (index) {
                        $.post("${pageContext.request.contextPath}/TaskPool/updateTaskStatus", {
                            TK_ID: data.tk_ID,
                            TK_STATUS: data.tk_STATUS
                        }, function (res) {
                            if (res.code == 0) {
                                layer.msg(res.msg, {icon: 1}, {timeout: 3000});
                                tableIns.reload();
                            } else if (res.code == -1) {
                                layer.msg(res.msg, {icon: 3}, {timeout: 3000});
                            }
                        })
                    });
                }
            });
        });
            // 监听搜索  选中部门
            $("#doSelectDept").click(function () {
            var f_id = $("#deptid").val();
            // 参数一 回调信息
            openDeptSelecter(null, f_id, function (id, name) {
            // 回显数据
            $("#p_deptid").val(id);
            $("#p_deptname").val(name);
            });
        });
</script>       
</body>
</html>
